<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>富豪榜</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <!-- 导航栏 -->
  <nav>
    <ul>
      <li>主页</li>
      <li>排行榜</li>
      <li>联系方式</li>
    </ul>
  </nav>
  <!-- 头部内容 -->
  <header>
    <!-- 导航栏的按钮 -->
    <button id="toggle">导航栏</button>
    <!-- 标题 -->
    <h2>欢迎来到富豪排行榜</h2>
    <!-- 欢迎语句 -->
    <p>weclome to the rich rank</p>
  </header>
  <!-- 主题内容 -->
  <div class="container">
    <!-- 左盒子 -->
    <aside>
      <!-- 五个按钮 -->
      <button id="add-user">添加账户</button>
      <button id="double">资金翻倍</button>
      <button id="show-millionaire">查询百万富翁</button>
      <button id="sort">财富榜</button>
      <button id="calculate">计算总额</button>
    </aside>
    <!-- 右盒子 -->
    <main id="main">
      <h2>
        <strong>Person</strong>
        <span>Wealth</span>
      </h2>
    </main>
  </div>

  <script>
    let dataInfo = [{
      name: "安东尼 戴维斯",
      money: 892001
    },
    {
      name: "凯里 欧文",
      money: 668932
    },
    {
      name: "史蒂夫 库里",
      money: 698756
    },
    {
      name: "德里克 罗斯",
      money: 492489
    },
    {
      name: "保罗 乔治",
      money: 853957
    },
    {
      name: "勒布朗 詹姆斯",
      money: 968472
    },
    {
      name: "詹姆斯 哈登",
      money: 718225
    },
    {
      name: "凯文 杜兰特",
      money: 889147
    },
    ];

    let main = document.querySelector("#main")
    let addBtn = document.querySelector("#add-user");
    let douBtn = document.querySelector("#double");
    let cheBtn = document.querySelector("#show-millionaire");
    let sortBtn = document.querySelector("#sort");
    let calBtn = document.querySelector("#calculate");

    let mey;
    let newMer = [];


    let index = 0;
    // 添加账户
    function fn1() {
      if (index < dataInfo.length) {
        let newP = document.createElement("h2");
        newP.innerHTML = `
                <strong>${dataInfo[index].name}</strong>
                <span>${dataInfo[index].money}</span>
                `;
        main.appendChild(newP);
      }
      index++;
    }

    addBtn.onclick = function () {
      fn1();
    }
    // 资金翻倍
    douBtn.addEventListener("click", function () {
      let moneyAll = main.querySelectorAll("h2:not(:first-child)");

      moneyAll.forEach(function (item, index) {

        if (item.children[1].innerText < 99999999) {
          item.children[1].innerText = (item.children[1].innerText) * 2;
        } else {
          // alert("清");
        }




      })
    })

    // 查询百万富翁
    cheBtn.addEventListener("click", function () {
      let moneyAll = main.querySelectorAll("h2:not(:first-child)");
      moneyAll.forEach(function (item, index) {

        let mey = item.children[1].innerText;
        if (mey > 1000000) {
          // main.appendChild(item);
          // console.log(index);
          // console.log("a");

        }

      })
    })

    // 财富榜
    sort.addEventListener("click", function () {
      let moneyAll = main.querySelectorAll("h2:not(:first-child)");
      newMer = [];
      let newSort;
      moneyAll.forEach(function (item, index) {
        mey = item.children[1].innerText;

        newMer.push(mey);
        // console.log(newMer);

      })
      // console.log(newMer);

      newSort=newMer.sort(function (a, b) {
        console.log(a);
        console.log(b);
        return b - a;
      })
      fn1();
      console.log(newSort);
      
      // main.appendChild(newSort);
      // item.children[1].innerText

    })

    // 计算总额
    calBtn.addEventListener("click", function () {
      let moneyAll = main.querySelectorAll("h2:not(:first-child)");
      let dataArr = [];
      let add = [];
      let mey;
      moneyAll.forEach(function (item, index) {
        mey = item.children[1].innerHTML;
        dataArr.push(mey);
      })

      let res;
      res = dataArr.reduce(function (total, current, index) {

        return total + current;
      });
      fn1();
      let newH = document.createElement("div");
      newH.innerHTML = `
          <h2>
            <strong>Total Weigth: </strong>
            <span>${res}</span>
          </h2>
        `
      main.appendChild(newH);
    })



  </script>
</body>

</html>